<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="./img/logo.svg">
	<title>和宝贝100天</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<!--演示页面样式，使用时可以不引用-->
	<link href="https://fonts.googleapis.com/css?family=Lato:900|Rye&display=swap" rel="stylesheet">
	<style>
		body{
			font-family: '楷体';
		}
		.wrapper {
			background: #252854;
			width: 100%;
			height: 500px;
			border-radius: 5px;
			position: relative;
		}

		.text {
			flex: 0 0 100%;
			font-size: 14rem;
			font-weight: 900;
			color: #00000000;
			text-align: center;
			font-family: 'Lato', sans-serif;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-bottom: 1px solid #d4d7ff;
			border-top: 1px solid #d4d7ff;
			background: url(./img/source.gif);
			background-clip: text;
			-webkit-background-clip: text;
		}

		.text:after {
			content: attr(data-text);
			-webkit-text-stroke: 1.5px #d4d7ff;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -49%);
			background: url(./img/source.gif);
			background-clip: text;
			-webkit-background-clip: text;
			background-size: 43%;

		}

		.filter {
			position: absolute;
			top: 7.5%;
			left: 48%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			z-index: 10;

		}

		.filter__list {
			display: flex;
		}

		.filter__item {
			display: block;
		}

		.filter__link {
			position: relative;
			display: block;
			color: rgba(255, 255, 255, 0.5);
			text-decoration: none;
			padding: 0 1.5vw;
			font-size: 1.15vw;
			overflow: hidden;
		}

		.filter__link-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			transition: -webkit-transform .75s ease;
			transition: transform .75s ease;
			transition: transform .75s ease, -webkit-transform .75s ease;
			z-index: 2;
		}

		.filter__link-mask span {
			display: block;
			padding: 0 1.5vw;
			font-size: 1.15vw;
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
			transition: -webkit-transform .75s ease;
			transition: transform .75s ease;
			transition: transform .75s ease, -webkit-transform .75s ease;
			color: #fff;
		}

		.filter__link:hover .filter__link-mask span,
		.filter__link.is-active .filter__link-mask span {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		.filter__link:hover .filter__link-mask,
		.filter__link.is-active .filter__link-mask {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		.logo {
			position: relative;
		}

		.logo--top {
			position: fixed;
			top: 2vw;
			left: 2vw;
			z-index: 10;
		}

		.logo--top img {
			height: 10vw;
			width: auto;
		}
		.related{
			background-color:  #252854;
			position: absolute;
			left: 32%;
			bottom: -300px;
		}
		.audio1{
			position: absolute;
			right: 0;
			bottom: 0;
		}
	</style>
</head>

<body>
	<div class="htmleaf-container">
		<figure class="logo logo--top js-trigger">
			<img src="img/logo.svg">
		</figure>
		<header class="htmleaf-header">
			<h1>我们100天啦！</h1>
			<div class="filter">
				<ul class="filter__list">
					<li class="filter__item">
						<a href="#" class="filter__link is-active js-trigger">
							<div class="filter__link-mask" area-hidden><span>首页</span></div>
							首页
						</a>
					</li>
					<li class="filter__item">
						<a href="./related/3/index.html" target="_blank" class="filter__link js-trigger">
							<div class="filter__link-mask" area-hidden><span>点点滴滴</span></div>
							点点滴滴
						</a>
					</li>
					<li class="filter__item">
						<a href="./related/2/index.html" target="_blank" class="filter__link js-trigger">
							<div class="filter__link-mask" area-hidden><span>这里有只猫</span></div>
							这里有只猫
						</a>
					</li>
					<li class="filter__item">
						<a href="./related/4/index.html" target="_blank" class="filter__link js-trigger">
							<div class="filter__link-mask" area-hidden><span>愿望</span></div>
							愿望
						</a>
					</li>
					<li class="filter__item">
						<a href="./related/5/index.html" target="_blank" class="filter__link js-trigger">
							<div class="filter__link-mask" area-hidden><span>小心心</span></div>
							小心心
						</a>
					</li>
				</ul>
			</div>
		</header>
		<div class="wrapper">
			<div class="text" data-text="2020.12.20">2020.12.20</div>
			<div class="related">
		    <h3>这里有着我们两个人的两张照片哟:</h3>
		    <a href="#">
			  <img src="img/1.jpg" width="300" height="200px" alt="第一次的我们"/>
			  <h3 style="text-align: center;">第一次的我们</h3>
			</a>
			<a href="#">
			  <img src="img/2.jpg" width="300" height="200px" alt="别人眼中的我们"/>
			  <h3 style="text-align: center;">别人眼中的我们</h3>
			</a>
		</div>
		<audio class="audio1" src="./music/tashanhe.mp3"  controls autoplay>抱歉！您的浏览器不支持该功能</audio>
		</div>
</body>

</html>